#jsonContainer {
  /*border: 1px solid var(--borderColor);*/
  height: 100%;
  width: 100%;
}

#inputsTile {
  height: 100%;
  min-width: 350px;
  border: 1px solid var(--borderColor);
  padding: 20px 30px 20px 30px;
  display: grid;
  grid-auto-rows: minmax(min-content, max-content);
  grid-template-columns: 1.5fr 1fr;
  grid-row-gap: 3px;
  align-items: center;
  background-color: var(--tileBackColor);
}

#menuTile {
  padding:10px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(12, 1fr);
  /*  grid-template-rows: minmax(min-content, max-content);
  grid-template-columns: repeat(15, 110px);*/
}

#menuTile>a{
font-size: 130%;
  color:#fefefe;
  text-align: center;
}

.reset {
  grid-row: 3;
  grid-column: 5;
}

.toggle {
  grid-row: 3;
  grid-column: 6;
}

.grafikk {
  grid-row: 3;
  grid-column: 7;
}

#menuTile>h1{
  grid-row:1;
  grid-column: 1/span 4
}

#optionsTile {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 0.5fr 1fr 1fr;
  grid-column-gap: 5px;
  align-items: stretch;
  padding: 20px 30px 20px 30px;
  border: 1px solid var(--borderColor);
  background-color: var(--tileBackColor);
}

#outputsTile {
  height: 100%;
  width: 100%;
  border: 1px solid var(--borderColor);
  background-color: var(--tileBackColor);
  padding: 20px 30px 20px 30px;
  display: none;
}
#outputsTile.visible{
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    /*grid-row-gap: 3px;*/
    /*  grid-column-gap: 3px;*/
    /*align-items: center;*/
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    align-items: start;
    grid-auto-rows: minmax(min-content, max-content);
}

#chartTile {
  height: 100%;
  width: 100%;
  border: 1px solid var(--borderColor);
  background-color: var(--tileBackColor);
  padding: 20px 30px 20px 30px;
  display:none;
}
#chartTile.visible{
  display:inline-block;
  align-self:center;
  justify-self:center;
}